<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item>小区配置</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 小区配置 -->
            <div class="hot-title">小区配置</div>
            <div class="userlist">
              <div class="status_box">
                <div class="search"><el-button @click="addList()">添加</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="List" border tooltip-effect="dark" style="width: 100%">
                  <el-table-column prop="areaName" label="区域"></el-table-column>
                  <el-table-column prop="streetName" label="街道"></el-table-column>
                  <el-table-column prop="villageAddress" label="地址"></el-table-column>
                  <el-table-column prop="villageName" label="小区名"></el-table-column>
                  <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                      <el-button @click="redact(scope.row)" type="text" size="small" class="hot-button">编辑</el-button>
                      <el-button @click="delWord(scope.row)" type="text" size="small" class="hot-button">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <el-dialog  title="添加小区"  :visible.sync="dialogVisible"  width="40%"  :before-close="handleClose">
              <el-form :model="form">
                <el-form-item label="" class="item">
                  <el-select v-model="form.areaId" placeholder="请选择区域" @change="selectChanged()">
                    <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="item">
                  <el-select v-model="form.streetId" placeholder="请选择街道">
                    <el-option v-for="item in StreetList" :key="item.id" :label="item.areaName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="item1">
                  <el-input v-model="form.villageName" placeholder="小区名字"></el-input>
                </el-form-item>
                <el-form-item label="" class="item1">
                    <el-input v-model="form.villageAddress" placeholder="小区地址"></el-input>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false,submit(form)">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
              </span>
            </el-dialog>
            <el-dialog  title="编辑小区"  :visible.sync="dialogVisible1"  width="40%"  :before-close="handleClose1">
              <el-form :model="form1">
                <el-form-item label="" class="item">
                  <el-select v-model="form1.areaId" placeholder="请选择区域" @change="selectChanged1()">
                    <el-option v-for="item in AreaList" :key="item.id" :label="item.areaName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="item">
                  <el-select v-model="form1.streetId" placeholder="请选择街道">
                    <el-option v-for="item in StreetList" :key="item.id" :label="item.areaName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" class="item1">
                  <el-input v-model="form1.villageName" placeholder="小区名字"></el-input>
                </el-form-item>
                <el-form-item label="" class="item1">
                    <el-input v-model="form1.villageAddress" placeholder="小区地址"></el-input>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible1 = false,submit1(form)">确 定</el-button>
                <el-button @click="dialogVisible1 = false">取 消</el-button>
              </span>
            </el-dialog>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'HotWord',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        AreaList:[],//成都区域列表
        StreetList:[],//街道列表
        List:[],//小区列表
        dialogVisible: false,//新增小区
        form: {//新增小区
          areaId: '',//区域id
          streetId: '',//街道id
          villageAddress: '',//小区详细地址
          villageName: '',//小区名字
        },
        dialogVisible1: false,//编辑小区
        form1: {//编辑小区
          id:'',
          areaId: '',//区域id
          streetId: '',//街道id
          villageAddress: '',//小区详细地址
          villageName: '',//小区名字
        },
      }
    },
    mounted() {
      this.findList();
    },
    methods: {
      //查询所有小区列表
      findList(){
        this.$axios.post(this.baseURL1+'admin/village/list',{
          "page":this.page,
          "size":this.pageSize,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.List = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //添加小区
      addList(){
        this.dialogVisible = true;
        this.getAreaList()
      },
      //获取成都的所有区域
      getAreaList(){
        this.$axios.post(this.baseURL1+'area/getAreaList',{
          "parentId":510100,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.AreaList = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //选择区域后获取该区域的街道
      selectChanged(){
        console.log(this.form.areaId)
        this.form.streetId=null
        this.getStreetList()
      },
      //根据区域id获取街道列表
      getStreetList(){
        this.$axios.post(this.baseURL1+'area/getAreaList',{
          "parentId":this.form.areaId,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.StreetList = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //关闭新增小区
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //确认新增小区
      submit(){
        console.log(this.form)
        this.$axios.post(this.baseURL1+'admin/village/add',{
          "areaId":this.form.areaId,
          "streetId":this.form.streetId,
          "villageName":this.form.villageName,
          "villageAddress":this.form.villageAddress,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.findList()
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //点击编辑小区
      redact(row){
        console.log(row)
        this.dialogVisible1 = true
        this.form1.id= row.id
        this.form1.areaId= row.areaId
        this.form1.streetId= row.streetId
        this.form1.villageName= row.villageName
        this.form1.villageAddress= row.villageAddress
        this.getAreaList()
        this.getStreetList1()
      },
      //编辑区域后获取该区域的街道
      selectChanged1(){
        console.log(this.form1.areaId)
        this.form1.streetId=null
        this.getStreetList1()
      },
      //根据区域id获取街道列表
      getStreetList1(){
        this.$axios.post(this.baseURL1+'area/getAreaList',{
          "parentId":this.form1.areaId,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.StreetList = res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //关闭编辑小区
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //确认编辑小区
      submit1(){
        console.log(this.form1)
        this.$axios.post(this.baseURL1+'admin/village/update',{
          "id":this.form1.id,
          "areaId":this.form1.areaId,
          "streetId":this.form1.streetId,
          "villageName":this.form1.villageName,
          "villageAddress":this.form1.villageAddress,
          "requestSource":"PC"
        }).then((res)=>{
          if(res.data.code==1){
            this.$message({
              type: 'success',
              message: '编辑成功!'
            });
            this.findList()
          }else{
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //删除某一个小区
      delWord(row){
        console.log("要删除的小区是：",row.id)
        this.$confirm('确认删除该小区?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/village/delete',{
            "id":row.id,
            "requestSource":"PC"
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.findList()
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .hot-title{
    width: 100%;
    height: 30px;
    background-color: #cfcfcf;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 30px;
  }
  .table{
    margin: 0 10px;
  }
  .item{
    display: inline-block;
  }
  >>> .el-select{
    width: 250px;
  }
  >>> .el-form-item__content{
    display: inline-block;
    width: 100%;
  }
  .item1{
    width: 505px;
  }
</style>
